﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>数据概览</title>
    <link href="css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/data_text.css">
    <link rel="stylesheet" href="css/foundation-datepicker.css">
    <link rel="stylesheet" href="css/xianchangzuoye.css">


    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <!--header开始-->
    <div class="aa">     
            <h1>现场作业环境看板</h1>
    </div>
    <!--header结束-->

    <!--content开始-->
    <div class="data_content">
        <!-- 头部滚动栏 -->
        <div class="box">
            <div class="data_info po PO0">
                <div class="info_1 fl">
                    <div class="text_1">
                        <div class="fl">
                            <!-- <img src="img/info_1.png" alt="" class="fl"> -->
                            <div class="fl">
                                <p></p>
                                <p class="aa">一号坑</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/thermometer.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>环境温度</p>
                                <p>22°C</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水滴.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>环境湿度</p>
                                <p>72.4%</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="info_2 fl">
                    <div class="text_2">
                        <div class="fl">
                            <img src="img/烟感.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>烟感</p>
                                <p>正常</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水位传感器.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>水位深度</p>
                                <p>0m</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="info_3 fr">
                    <div class="text_3">
                        <div class="fl">
                            <img src="img/通风风扇.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>风机控制</p>
                                <p>正常</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水泵.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>水泵控制</p>
                                <p>正常</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="data_info po po1">
                <div class="info_1 fl">
                    <div class="text_1">
                        <div class="fl">
                            <!-- <img src="img/info_1.png" alt="" class="fl"> -->
                            <div class="fl">
                                <p></p>
                                <p class="aa">二号坑</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/thermometer.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>环境温度</p>
                                <p>22°C</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水滴.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>环境湿度</p>
                                <p>74.2%</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="info_2 fl">
                    <div class="text_2">
                        <div class="fl">
                            <img src="img/烟感.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>烟感</p>
                                <p>正常</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水位传感器.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>水位深度</p>
                                <p>0m</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="info_3 fr">
                    <div class="text_3">
                        <div class="fl">
                            <img src="img/通风风扇.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>风机控制</p>
                                <p>正常</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水泵.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>水泵控制</p>
                                <p>正常</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="data_info po po2">
                <div class="info_1 fl">
                    <div class="text_1">
                        <div class="fl">
                            <!-- <img src="img/info_1.png" alt="" class="fl"> -->
                            <div class="fl">
                                <p></p>
                                <p class="aa">三号坑</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/thermometer.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>环境温度</p>
                                <p>22°C</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水滴.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>环境湿度</p>
                                <p>72.4%</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="info_2 fl">
                    <div class="text_2">
                        <div class="fl">
                            <img src="img/烟感.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>烟感</p>
                                <p>正常</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水位传感器.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>水位深度</p>
                                <p>0m</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="info_3 fr">
                    <div class="text_3">
                        <div class="fl">
                            <img src="img/通风风扇.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>风机控制</p>
                                <p>正常</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水泵.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>水泵控制</p>
                                <p>正常</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="data_info po po3">
                <div class="info_1 fl">
                    <div class="text_1">
                        <div class="fl">
                            <!-- <img src="img/info_1.png" alt="" class="fl"> -->
                            <div class="fl">
                                <p></p>
                                <p class="aa">四号坑</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/thermometer.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>环境温度</p>
                                <p>22°C</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水滴.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>环境湿度</p>
                                <p>72.4%</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="info_2 fl">
                    <div class="text_2">
                        <div class="fl">
                            <img src="img/烟感.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>烟感</p>
                                <p>正常</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水位传感器.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>水位深度</p>
                                <p>0m</p>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="info_3 fr">
                    <div class="text_3">
                        <div class="fl">
                            <img src="img/通风风扇.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>风机控制</p>
                                <p>正常</p>
                            </div>
                        </div>
                        <div class="fl">
                            <img src="img/水泵.png" alt="" class="fl siz">
                            <div class="fl">
                                <p>水泵控制</p>
                                <p>停止 </p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>

        <div class="data_main">
            <div class="main_left fl">
                <!-- 气体环境占比 -->
                <div class="left_1">
                    <div class="main_title">
                        <img src="img/title_1.png" alt="">
                        环境气体占比
                    </div>
                    <div id="chart_1" class="chart" style="width:100%;height: 280px;"></div>
                </div>
                <div class="left_2">
                    <div class="main_title">
                        <img src="img/title_2.png" alt="">
                        异常状态统计
                    </div>
                    <!-- <div id="chart_2" class="chart" style="width:100%;height: 280px;"></div> -->
                    <div class="box-d">
                        <h3><span>四号坑</span>：<span>水泵停止。</span><span> </span><span>请及时处理！</span></h3>
                    </div>
                </div>
            </div>
            <div class="main_center fl">
                <div class="center_text">
                    <div class="main_title">
                        <img src="img/title_3.png" alt="">
                        基坑实时监控
                    </div>
                    <!-- <div id="chart_map" style="width:100%;height:610px;"></div> -->
                    <div class="box-c">
                        <div class="content-1"></div>
                        <div class="content-2"></div>
                        <div class="content-3"></div>
                        <div class="content-4"></div>

                    </div>
                </div>
            </div>
            <div class="main_right fr">
                <div class="right_1">
                    <div class="main_title">
                        <img src="img/title_4.png" alt="">
                        天气情况
                    </div>
                    <!-- <div class="choice">
                        <label for="">类型：</label>
                        <select name="" id="">
                            <option value="">客车</option>
                            <option value="">客车</option>
                            <option value="">客车</option>
                        </select>
                    </div> -->
                    <div id="chart_3" class="echart" style="width:100%;height: 280px;"></div>
                </div>
                <div class="right_2">
                    <div class="main_title">
                        <img src="img/title_5.png" alt="">
                        土壤结构
                    </div>
                    <div id="chart_4" class="echart fl" style="width:100%;height: 230px;"></div>
                    <!-- <div class="fr chart_text">
                        <p>同比</p>
                        <p><img src="img/down.png" alt="">2%</p>
                        <p><img src="img/up.png" alt="">4%</p>
                        <p><img src="img/down.png" alt="">5%</p>
                        <p><img src="img/down.png" alt="">3%</p>
                    </div> -->
                    <!-- <div style="width: 80%;" class="text_sum">
                        <div class="fl" style="width:30%">332</div>
                        <div class="fl" style="width:40%">统计</div>
                        <div class="fr" style="width:30%">505</div>

                    </div> -->
                </div>
            </div>
        </div>

    </div>
    </div>
</body>
<script src="js/jquery-2.2.1.min.js"></script>
<!-- <script src="js/bootstrap.min.js"></script> -->
<script src="js/common.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/echart.js"></script>
<script src="js/china.js"></script>
<!-- <script src="js/foundation-datepicker.js"></script> -->
<script>

</script>

</html>